<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeakMap实战Demo--选课操作</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 500px;
            height: 300px;
            border: 2px solid #ccc;
            display: flex;
        }
        .left{
            width: 250px;
            height: 100%;
            border-right: 2px solid #ccc;
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            align-items: center;
            padding-top: 30px;
        }
        .right{
            width: 250px;
            height: 100%;
            /* border-right: 2px solid #ccc; */
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            align-items: center;
            padding-top: 30px;
        }
        ul{
            list-style: none;
        }
        li{
            width: 200px;
            height: 100%;
            /* background-color: skyblue; */
            display: flex;
            justify-content: space-around;
        }
        a{
            text-decoration: none;
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #2ecc71;
            line-height: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <h3>可选的课</h3>
            <ul>
                <li>Vue.js<a href="javascript:;">+</a></li>
                <li>Node.js<a href="javascript:;">+</a></li>
                <li>JavaScript<a href="javascript:;">+</a></li>
            </ul>
        </div>
        <div class="right">
            <h3>已选的课</h3>
            <span class="number"></span>
            <div class="showcor"></div>
        </div>
    </div>
    <script>
        /*
            使用类这种面向对象的方法 一定要多多的使用方法  左到一个功能一个方法
        */
    //    定义一个类只需要 使用class来标识一下 使用的时候只需要 new一下这个实例对象即可
        class selcou {
            // constructor  构造函数是只要我们实例化对象  回自动创建的运行的方法
            constructor(){
                this.left = document.querySelector('.left')
                this.li = document.querySelectorAll('ul>li')
                this.number = document.querySelector('.number')
                this.cour = document.querySelector('.showcor')
                this.count = 0
                this.lis = new WeakMap()
                // console.log(lis)
            }
            run(){
                this.li.forEach(item=>{
                    /*
                        querySelector()的功能很强大  我们可以再随意的一个Dom元素上使用这个方法  来查找这个元素下面的元素
                    */
                    let is = item.querySelector('a')
                    is.addEventListener('click',(e)=>{
                        if(this.lis.has(item)){
                            // alert('你已经选择过了')
                            is.style.backgroundColor = '#2ecc71'
                            is.innerHTML = '+'
                            this.del(item)
                            /*
                                e.target.parentElement 
                                    target.parentElement是查找某个元素的父元素
                            */
                            e.target.parentElement.style.opacity = '1'
                            this.count--
                            this.render()
                        }else{
                            is.style.backgroundColor = '#e74c3c'
                            this.add(item)
                            is.innerHTML = '-'
                            this.count++
                            e.target.parentElement.style.opacity = '.5'
                            this.render()
                            // alert('添加成功')
                        }
                    })
                })
            }
            add(obj){
                this.lis.set(obj)
            }
            del(obj){
                this.lis.delete(obj)
            }
            render(){
                // this.a.innerHTML = '-'
                // this.a.style.backgroundColor = ''
                this.shou()
                this.number.innerHTML = `已经添加了${this.count}门课`
            }
            shou(){
                let arr = Array.from(this.li)
                // let arr = Array.from(this.lis)
                // 数组都是可以链式操作的  所以很方便我们的操作
                let newnode = arr.filter(item=>{
                    return this.lis.has(item)
                }).map(item=>{
                    return `<span>${item.innerText}</span>`
                })
                console.log(newnode)
                this.cour.innerHTML = `<span>${newnode}</span>`
            }
        }
        new selcou().run()
    </script>
</body>
</html>